/* eslint-disable prettier/prettier */
import '../assets/sidebar.css'
import { useNavigate } from 'react-router-dom'
// import React from 'react'
import { SettingOutlined, HomeOutlined, ContactsOutlined } from '@ant-design/icons'
import GlobalContext from './GlobalContext.jsx'

const { nodes, navTo } = window.api.sidebar

function SideBar() {
  const navigate = useNavigate()

  return (
    <GlobalContext.Consumer>
      {(context) => {
        return (
          <div className="sidebar">
            <div
              ref={nodes[0]}
              className="sidebar-item sidebar-item-active"
              onClick={() => navTo(navigate, '/', nodes[0])}
            >
              <HomeOutlined style={{ fontSize: '22px' }} />
              {/* 主页 */}
              {context.t('home')}
            </div>
            <div
              ref={nodes[1]}
              className="sidebar-item"
              onClick={() => navTo(navigate, '/setting', nodes[1])}
            >
              <SettingOutlined style={{ fontSize: '22px' }} />
              {/* 设置 */}
              {context.t('setting')}
            </div>
            <div
              ref={nodes[2]}
              className="sidebar-item"
              onClick={() => navTo(navigate, '/about', nodes[2])}
            >
              <ContactsOutlined style={{ fontSize: '22px' }} />
              {/* 关于 */}
              {context.t('about')}
            </div>
          </div>
        )
      }}
    </GlobalContext.Consumer>
  )
}

export default SideBar
